<template>
  <div class="warpper-box">
    <div class="inner_box">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>供应商账号注册审核</span>
              <el-button
                type="text"
                @click="morePath(1, 'supplierApproveRegCode')"
                style="font-size: 20px;float: right;padding: 0;"
                icon="el-icon-circle-plus"
              ></el-button>
            </div>
            <div class="line-po" v-if="regList.length >= 1">
              <div
                class="lis"
                v-for="(item, index) in regList"
                :key="index"
                @click="detailOpen(1, item)"
              >
                <div class="lis-label">
                  <label>{{ item.name }}</label>
                </div>
                <label>{{ item.createTime | formatDate }}</label>
              </div>
            </div>
            <div class="line-po" v-if="regList.length === 0">
              <el-empty :image-size="98"></el-empty>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>供应商入库申请审核</span>
              <el-button
                type="text"
                @click="morePath(2, 'supplierApproveStoreCode')"
                style="font-size: 20px;float: right;padding: 0;"
                icon="el-icon-circle-plus"
              ></el-button>
            </div>
            <div class="line-po" v-if="storeList.length >= 1">
              <div
                class="lis"
                v-for="(item, index) in storeList"
                :key="index"
                @click="detailOpen(2, item)"
              >
                <div class="lis-label">
                  <label>{{ item.name }}【{{item.applyCategoryName}}】</label>
                </div>
                <label>{{ item.storeApplyTime | formatDate }}</label>
              </div>
            </div>
            <div class="line-po" v-if="storeList.length === 0">
              <el-empty :image-size="98"></el-empty>
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>供应商资料更新审核</span>
              <el-button
                type="text"
                @click="morePath(3, 'supplierApproveInfoCode')"
                style="font-size: 20px;float: right;padding: 0;"
                icon="el-icon-circle-plus"
              ></el-button>
            </div>
            <div class="line-po" v-if="infoList.length >= 1">
              <div
                class="lis"
                v-for="(item, index) in infoList"
                :key="index"
                @click="detailOpen(3, item)"
              >
                <div class="lis-label">
                  <label>{{ item.name }}【{{item.applyCategoryName}}】</label>
                </div>
                <label>{{ item.storeApplyTime | formatDate }}</label>
              </div>
            </div>
            <div class="line-po" v-if="infoList.length === 0">
              <el-empty :image-size="98"></el-empty>
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>暂停使用供应商名单</span>
              <el-button
                type="text"
                @click="morePath(4, 'supplierLibPauseCode')"
                style="font-size: 20px;float: right;padding: 0;"
                icon="el-icon-circle-plus"
              ></el-button>
            </div>
            <div class="line-po" v-if="pauseList.length >= 1">
              <div
                class="lis"
                v-for="(item, index) in pauseList"
                :key="index"
                @click="detailOpen(4, item)"
              >
                <div class="lis-label">
                  <label>{{ item.name }}【{{item.applyCategoryName}}】</label>
                </div>
                <label>{{ item.pauseTime | formatDate }}</label>
              </div>
            </div>
            <div class="line-po" v-if="pauseList.length === 0">
              <el-empty :image-size="98"></el-empty>
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>黑名单供应商</span>
              <el-button
                type="text"
                @click="morePath(5, 'supplierLibBlacklistCode')"
                style="font-size: 20px;float: right;padding: 0;"
                icon="el-icon-circle-plus"
              ></el-button>
            </div>
            <div class="line-po" v-if="blacklistList.length >= 1">
              <div
                class="lis"
                v-for="(item, index) in blacklistList"
                :key="index"
                @click="detailOpen(5, item)"
              >
                <div class="lis-label">
                  <label>{{ item.name }}</label>
                </div>
                <label>{{ item.blacklistTime | formatDate }}</label>
              </div>
            </div>
            <div class="line-po" v-if="blacklistList.length === 0">
              <el-empty :image-size="98"></el-empty>
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>入库有效期即将到期供应商</span>
              <el-button
                type="text"
                @click="morePath(6, 'supplierLibPassCode')"
                style="font-size: 20px;float: right;padding: 0;"
                icon="el-icon-circle-plus"
              ></el-button>
            </div>
            <!--@click="detailOpen(6, item)"-->
            <div class="line-po" v-if="expireList.length >= 1">
              <div
                class="lis"
                v-for="(item, index) in expireList"
                :key="index"
              >
                <div class="lis-label">
                  <label>{{ item.name }}【{{item.notificationContent}}】</label>
                </div>
                <label>{{ item.notificationTime | formatDate }}</label>
              </div>
            </div>
            <div class="line-po" v-if="expireList.length === 0">
              <el-empty :image-size="98"></el-empty>
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>通知公告浏览</span>
              <el-button
                type="text"
                @click="morePath(7, 'supplierNoticeListCode')"
                style="font-size: 20px;float: right;padding: 0;"
                icon="el-icon-circle-plus"
              ></el-button>
            </div>
            <div class="line-po" v-if="noticeList.length >= 1">
              <div
                class="lis"
                v-for="(item, index) in noticeList"
                :key="index"
                @click="detailOpen(7, item)"
              >
                <div class="lis-label">
                  <label>{{ item.title }}</label>
                </div>
                <label>{{ item.createTime | formatDate }}</label>
              </div>
            </div>
            <div class="line-po" v-if="noticeList.length === 0">
              <el-empty :image-size="98"></el-empty>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <supplierDetail ref="createSupplierDetail" />
      <infoStore ref="createInfoStore" />
      <approveReg ref="createApproveReg" @onOk="getRegList" />
      <approveStore
        ref="createApproveStore"
        title="入库审核"
        storeTitle="入库资料"
        @onOk="uploadStore"
        :isInfo="isInfo"
        :isStoreInfo="isStoreInfo"
      />
      <noticeDetail ref="createNoticeDetail" />
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { mapGetters, mapActions } from "vuex";
import {
  supplierPageFind,
  getSupplierStorePage,
  getJiJiangDaoQi,
  getNoticePage,
  getMyNoticeList,
  setNoticeRecord
} from "@/api/supplier_api";
import supplierDetail from "@/views/supplier/supplierModel/supplier_detail.vue";
import approveReg from "@/views/supplier/supplierModel/approve_reg.vue";
import approveStore from "@/views/supplier/supplierModel/approve_store.vue";
import infoStore from "@/views/supplier/supplierModel/info_store.vue";
import noticeDetail from "@/views/supplier/notice/notice_detal.vue";
export default {
  components: {
    supplierDetail,
    approveStore,
    approveReg,
    infoStore,
    noticeDetail
  },
  name: "sysHome",
  data() {
    return {
      regList: [],
      storeList: [],
      infoList: [],
      pauseList: [],
      blacklistList: [],
      noticeList: [],
      expireList: [],
      params: { pageNum: 1, pageSize: 5 },
      isStoreInfo: false,
      isInfo: false
    };
  },
  filters: {
    formatDate(value) {
      if (!value) {
        return "";
      }
      return moment(value).format("YYYY-MM-DD");
    }
  },
  computed: {
    ...mapGetters(["findType","permission_user"])
  },
  mounted() {
    this.getRegList();
    this.getStoreList();
    this.getInfoList();
    this.getPauseList();
    this.getblacklistList();
    this.getexpireList();
    this.getNoticeList();
  },
  methods: {
    async getNoticeList() {
      let param = {};
      console.log(this.permission_user)
      param.receiverId = this.permission_user.id;
      param.pageNum = 1;
      param.pageSize = 5;
      const { code, data } = await getMyNoticeList(param);
      if (code == 200) {
        this.noticeList = data.list;
      }
    },
    async getRegList() {
      let param = {};
      param.pageNum = this.params.pageNum;
      param.pageSize = this.params.pageSize;
      param.queryType = this.findType["reg"];
      param.statusFlag = "0";
      let { code, data } = await supplierPageFind(param);
      if (code == 200) {
        this.regList = data.list;
      }
    },
    //更新入库和资料审核
    uploadStore() {
      this.getStoreList();
      this.getInfoList();
    },
    async getStoreList() {
      let param = {};
      param.pageNum = this.params.pageNum;
      param.pageSize = this.params.pageSize;
      param.storeType = "1"; //入库查询
      param.storeStatus = "0";
      let { code, data } = await getSupplierStorePage(param);
      if (code == 200) {
        data.list.forEach(v => {
          v.storeSupplierId = v.id;
          v.id = v.applyId;
        });
        this.storeList = data.list;
      }
    },
    async getInfoList() {
      let param = {};
      param.pageNum = this.params.pageNum;
      param.pageSize = this.params.pageSize;
      param.storeType = "2"; //资料更新查询
      param.storeStatus = "0";
      let { code, data } = await getSupplierStorePage(param);
      if (code == 200) {
        data.list.forEach(v => {
          v.storeSupplierId = v.id;
          v.id = v.applyId;
        });
        this.infoList = data.list;
      }
    },
    async getPauseList() {
      let param = {};
      param.pageNum = this.params.pageNum;
      param.pageSize = this.params.pageSize;
      param.isPaused = 1;
      const { code, data } = await getSupplierStorePage(param);
      if (code == 200) {
        data.list.forEach((v, i) => {
          v.storeSupplierId = v.id;
          v.id = v.applyId;
        });
        this.pauseList = data.list;
      }
    },
    async getblacklistList() {
      let param = {};
      param.pageNum = this.params.pageNum;
      param.pageSize = this.params.pageSize;
      param.tag = "3";
      const { code, data } = await supplierPageFind(param);
      if (code == 200) {
        data.list.forEach((v, i) => {
          v.storeSupplierId = v.id;
          v.id = v.applyId;
        });
        this.blacklistList = data.list;
      }
    },
    async getexpireList() {
      let param = {};
      param.pageNum = this.params.pageNum;
      param.pageSize = this.params.pageSize;
      param.bizType = "ZLGX";
      const { code, data } = await getJiJiangDaoQi(param);
      if (code == 200) {
        this.expireList = data.list;
      }
    },
    detailOpen(type, row) {
      this.isStoreInfo = false;
      this.isInfo = false;
      if (type === 1) {
        this.$refs.createApproveReg.openForm(row);
      } else if (type === 2) {
        this.isStoreInfo = true;
        setTimeout(() => {
          this.$refs.createApproveStore.openStoreForm(row);
        }, 0);
      } else if (type === 3) {
        this.isInfo = true;
        setTimeout(() => {
          this.$refs.createApproveStore.openStoreForm(row);
        }, 0);
      } else if (type === 4) {
        // 查询个人资料 storeSupplierId
        //查询类别资料 id
        this.$refs.createSupplierDetail.openDetail(row, 2);
      } else if (type === 5) {
        this.$refs.createSupplierDetail.openDetail(row, 2);
      } else if (type === 6) {
        //this.$refs.createSupplierDetail.openDetail(row, 2);
      } else if (type === 7) {
        if (row.isRead == 0) {
          this.editNoticeRecord(row.recordId);
        }
        this.$refs.createNoticeDetail.openDetail(row, false);
      }
    },
    async editNoticeRecord(id) {
      await setNoticeRecord(id);
    },
    morePath(type, url) {
      if (type === 1 && this.regList.length == 0) {
        return this.$message.error("暂无注册审核任务！");
      }
      if (type === 2 && this.storeList.length == 0) {
        return this.$message.error("暂无入库审核任务！");
      }
      if (type === 3 && this.infoList.length == 0) {
        return this.$message.error("暂无入库资料审核任务！");
      }
      if (type === 4 && this.pauseList.length == 0) {
        return this.$message.error("暂无暂停数据！");
      }
      if (type === 5 && this.blacklistList.length == 0) {
        return this.$message.error("暂无黑名单数据！");
      }
      if (type === 6 && this.expireList.length == 0) {
        return this.$message.error("暂无即将到期供应商！");
      }
      this.$router.push({ name: url });
    }
  }
};
</script>
<style>
.lis {
  display: flex;
  border-bottom: 1px solid #ebeef5;
  padding: 10px 0;
}
.lis:hover label {
  color: #409eff;
  cursor: pointer;
}
.lis-label {
  flex: 1;
  margin-right: 20px;
  line-height: 28px;
}
.line-po {
  height: 224px;
}
</style>
